<template>
	<el-dialog
		title="表格配置"
		class="dialog-share dialog"
		:visible.sync="dialog"
		width="800px"
		:before-close="cancel"
		:close-on-click-modal="false"
		:append-to-body="true"
	>
		<div class="dialog-content share-c">
			<el-form :model="tableForm" ref="dialogForm" label-width="130px">
				<el-row>
					<el-col :span="12">
						<el-form-item label="是否显示选择框：" prop="isSelection">
							<el-switch v-model="tableForm.isSelection"></el-switch>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="是否固定操作列：" prop="operationPosition">
							<el-radio-group v-model="tableForm.operationPosition">
								<el-radio :label="false">否</el-radio>
								<el-radio label="left">左</el-radio>
								<el-radio label="right">右</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="是否显示序号：" prop="isSerial">
							<el-switch v-model="tableForm.isSerial"></el-switch>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-col :span="12">
							<el-form-item label="是否显示操作：" prop="isOperation">
								<el-switch v-model="tableForm.isOperation"></el-switch>
							</el-form-item>
						</el-col>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="是否显示边框：" prop="isBorder">
							<el-switch v-model="tableForm.isBorder"></el-switch>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="操作列宽：" prop="operationWidth">
							<el-input v-model="tableForm.operationWidth" type="text" size="small" placeholder="请输入操作列宽"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="是否切换布局：" prop="switchLayout">
							<el-switch v-model="tableForm.switchLayout"></el-switch>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="是否显示斑马纹：" prop="isStripe">
							<el-switch v-model="tableForm.isStripe"></el-switch>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="是否树形表格:" prop="isTreeTable">
							<el-switch v-model="tableForm.isTreeTable"></el-switch>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="是否编辑表格：" prop="isEditTable">
							<el-switch v-model="tableForm.isEditTable"></el-switch>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="选择框类型：" prop="selectionType">
							<el-radio-group v-model="tableForm.selectionType">
								<el-radio label="checkbox">复选框</el-radio>
								<el-radio label="radio">单选框</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button size="small" @click="cancel(false)">取消</el-button>
			<el-button type="primary" size="small" @click="submitForm">确定</el-button>
		</div>
	</el-dialog>
</template>

<script>

export default {
  name: 'tableForm',
  components: {
  },
  props: {
    dialog: {
		type: Boolean,
		default: false
	},
	info: {
		type: Object,
		default: () => {}
	}
  },
  data() {
	return {
		tableForm: {
			isBorder: false,
			isStripe: true,
			operationPosition: false,
			isOperation: true,
			operationWidth: 250,
			isSerial: true,
			switchLayout: false,
			isTreeTable: false,
			isEditTable: false,
			isSelection: false,
			selectionType: "checkbox"
		},
		cmOptions: {
			tabSize: 4,
			mode: "application/json",
			theme: "default",
			lineNumbers: true,
			line: true,
			autoCloseBrackets: true,
			showCursorWhenSelecting: true,
			readOnly: false,
			foldGutter: true,
			lineWrapping: true,
			gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
		},
		tableTabsName: 'tableData'
	}
  },
  created() {
		if (this.info) {
			this.tableForm = this.info
		}
  },
  methods: {
	// js代码赋值
	codeChange(e){
		const val = e.getValue();
		const jsonValue = val !== '' ? JSON.stringify(JSON.parse(val), null, 2) : val;
		this.tableForm.submitData = jsonValue
	},
	// 切换标签页
	handleClick() {
		if (this.tableTabsName === 'submitData') {
			this.$nextTick(()=> {
				this.$refs.myCm.codemirror.focus();
				this.$refs.myCm.codemirror.refresh()
			})
		}
	}, 
	submitForm() {
		if (this.tableForm.isEdit && this.tableForm.submitData === '') {
			this.$message.error('请您填写单行提交数据')
			return false
		}
		this.cancel(true, this.tableForm)
	},
	cancel(flag, data) {
		this.$emit('tableClose', flag, data)
	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	@import '../fonts/TableMaking.css';
	.dialog-share .el-radio:last-child{
		margin-right: 20px !important;
	}
</style>
